<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - AI Hub</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>AI Hub</h1>
            <nav>
                <ul>
                    <li><a th:href="@{/}">首页</a></li>
                    <li><a th:href="@{/posts}">帖子</a></li>
                    <li><a th:href="@{/login}">登录</a></li>
                    <li><a th:href="@{/register}" class="active">注册</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="form-container">
            <h2 class="form-title">用户注册</h2>
            <form id="registerForm" th:action="@{/api/users/register}">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" name="username" placeholder="请输入用户名">
                    <div id="registerUsernameError" class="error-message"></div>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" placeholder="请输入邮箱">
                    <div id="emailError" class="error-message"></div>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" placeholder="请输入密码">
                    <div id="registerPasswordError" class="error-message"></div>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码">
                    <div id="confirmPasswordError" class="error-message"></div>
                </div>
                <button type="submit" class="form-button">注册</button>
                <div class="form-link">
                    <p>已有账号？<a th:href="@{/login}">立即登录</a></p>
                </div>
                <div id="registerResult" class="result-message"></div>
            </form>
        </div>
    </main>

    <footer>
        <div class="footer-container">
            <p>&copy; 2025 AI Hub. 保留所有权利。</p>
        </div>
    </footer>

    <script th:src="@{/js/main.js}"></script>
</body>
</html>